<template>
	<view class="hui b_width">
		<u-navbar leftIcon=" " leftIconColor="black" :autoBack="true" title="被子租赁" titleStyle="color:black"
			:placeholder="true" bgColor="#F4F4F4">
		</u-navbar>
		<!-- <view style="height: 140rpx;">
			<HM-filterDropdown :menuTop="170" :filterData="filterData" :defaultSelected="filterDropdownValue"
				@confirm="confirm"></HM-filterDropdown>
		</view> -->
		<view class="tar_box" v-if="articleInfo">
			<rich-text :nodes="articleInfo.content" class="content"></rich-text>
		</view>
		<view class="tar_tc"></view>
		<view class="msg_box">
			请选择如下医院下单
		</view>
		<view class="yy_box">
			<view @click="confirm(item)" class="b_flex_c_s yy_info" v-for="(item,index) in hospital" :key="index">
				<view>{{item.name}}</view>
				<image class="right" mode="widthFix" src="@/static/img/my/rights.png"></image>
			</view>
		</view>
	
		
	<!-- 	<view class="list_box">
			<view class="info_box" v-for="(item,index) in list" :key="index" @click="getWxInfo(item)">
				<image class="img" mode="widthFix" :src="item.sliderImage"></image>
				<view class="content_box">
					<view class="name">{{item.name}}</view>
					<view class="price"><span class="money">￥</span>{{item.price}}/{{item.unit}}</view>
					<view class="b_flex_cc">
						<!-- <view class="button info" @click="$project.toPath('/pages/lease/info')">详情</view> 
						<button v-if="!token" class="button zu" open-type="getPhoneNumber"
							@getphonenumber="getPhoneNumber">
							立即租赁
						</button>
						<view v-else class="button zu">立即租赁</view>
					</view>
				</view>
			</view>
		</view>
		<empty v-if="emptyShow" text="暂无被子"></empty> -->
		<Bootm value="被子租赁"></Bootm>
	</view>
</template>

<script>
	import Bootm from "@/components/bottom.vue";
	import {
		userLogin,
		userPhone,
		articleList,
		quilt,
		hospitalLists
	} from "@/require/api.js";
	import empty from "@/components/empty.vue";
	export default {
		components: {
			Bootm,
			empty
		},
		data() {
			return {
				list: [],
				listParams: {
					hospitalId: 0
				},
				emptyShow: true,
				token: '',
				params: {
					nickName: '微信用户',
					avatar: "https://thirdwx.qlogo.cn/mmopen/vi_32/POgEwh4mIHO4nibH0KlMECNjjGxQUq24ZEaGT4poC6icRiccVGKSyXwibcPq4BWmiaIGuG1icwxaQX6grC9VemZoJ8rg/132",
					code: '',
					city: '',
					country: '',
					headimgurl: "https://thirdwx.qlogo.cn/mmopen/vi_32/POgEwh4mIHO4nibH0KlMECNjjGxQUq24ZEaGT4poC6icRiccVGKSyXwibcPq4BWmiaIGuG1icwxaQX6grC9VemZoJ8rg/132",
					openId: '',
					province: '',
					sex: '',
					spread_spid: 0,
					type: 'routine'
				},
				phoneParams: {
					encryptedData: '',
					iv: '',
					code: '',
					key: '',
					type: 'routine'
				},
				item: '',
				articleParams: {
					cid: 749,
					page: 1,
					limit: 1
				},
				articleInfo: '',
				filterData: [{
					name: '请先选择医院',
					type: 'hierarchy',
					submenu: []
				}, ],
				hospital:[]
			}
		},
		onLoad() {

		},
		onShow() {
			this.$project.getNetwork();
			this.token = uni.getStorageSync('qlbToken');
			this.getArticleInfo();
			this.getList();
			this.getHospitalLists();
		},
		methods: {
			confirm(e) {
				//this.listParams.hospitalId = e.value[0][0];
				//this.listParams.hospitalId = e.id;
				//this.getList();
				this.$project.toPath('/pages/lease/shop?id='+e.id);
			},
			async getHospitalLists() {
				let {
					data
				} = await hospitalLists({
					page: 1,
					limit: 9999
				});
				let datas = data.list;
				this.hospital=datas;
				let hospital = [];
				/* datas.forEach(res => {
					hospital.push({
						value: res.id,
						name: res.name
					})
				});
				this.filterData[0].submenu = hospital; */
			},
			async getList() {
				let {
					data
				} = await quilt(this.listParams);
				if (data.length < 1 || !data) {
					this.emptyShow = true;
				} else {
					this.emptyShow = false;
				}
				this.list = data;
			},
			async getArticleInfo() {
				let {
					data
				} = await articleList(this.articleParams.cid, this.articleParams);
				if (data.list.length < 1) return;
				this.articleInfo = data.list[data.list.length - 1];
				if (this.articleInfo.content) {
					this.articleInfo.content = this.$project.formatRichText(this.articleInfo.content).replace(
						/src="\//g,
						'src="' + this.$imgUrl
						.imgRemote + '/');
				}
			},
			getWxInfo(item) {
				this.item = encodeURIComponent(JSON.stringify(item));
				if (this.token) {
					this.$project.toPath('/pages/lease/order?item=' + this.item);
					return;
				}
				let _ = this;
				uni.getUserProfile({
					desc: '授权确认',
					success(res) {
						console.log('用户信息', res);
						let {
							nickName,
							avatarUrl,
							gender
						} = res.userInfo;
						_.params.nickName = nickName;
						_.params.avatar = avatarUrl;
						_.params.headimgurl = avatarUrl;
						_.params.sex = gender;

						uni.login({
							provider: 'weixin',
							success(ress) {
								_.params.code = ress.code;
								userLogin(_.params, ress.code).then(data => {
									_.phoneParams.key = data.data.key;
									if (!data.data.key) {
										uni.setStorageSync('qlbToken', data.data.token);
										_.token = data.data.token;
										_.$project.toPath('/pages/lease/order?item=' + _.item)
									}
								});
							}
						})

					}
				})
			},
			getPhoneNumber(e) {

				setTimeout(() => {
					this.wxLogin(e);
				}, 1500)

			},
			wxLogin(e) {

				let _ = this;
				if (!_.phoneParams.key) return;
				uni.login({
					provider: 'weixin',
					success(ress) {
						console.log(ress);
						_.phoneParams.code = ress.code;

						let {
							encryptedData,
							iv
						} = e.detail;

						_.phoneParams.encryptedData = encryptedData;
						_.phoneParams.iv = iv;

						userPhone(_.phoneParams).then(data => {
							uni.setStorageSync('qlbToken', data.data.token);
							_.token = data.data.token;
							_.$project.toPath('/pages/lease/order?item=' + _.item);
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .u-navbar__content__title {
		font-size: 32rpx !important;
		font-weight: bold;
		color: #252B50 !important;
	}

	.hui {
		box-sizing: border-box;
		
	}

	.tar_box {
		box-sizing: border-box;
		padding: 20rpx;
		border: 2rpx solid #F9B697;
		border-radius: 8rpx;
		background-color: #F4F4F4;
		font-weight: 500;
		color: #252B50;
		font-size: 32rpx;
	}

	.info_box {
		margin-top: 20rpx;
		background-color: #fff;
		box-sizing: border-box;
		padding: 0 0 15rpx 0;
	}

	.img {
		width: 100%;
		border-radius: 8rpx 8rpx 0 0;
	}

	.content_box {
		box-sizing: border-box;
		padding: 20rpx 30rpx;
	}

	.name {
		font-weight: bold;
		color: #252B50;
		margin-bottom: 10rpx;
	}

	.price {
		color: #FF0100;
		font-weight: bold;
		margin-bottom: 30rpx;
	}

	.money {
		font-size: 25rpx;
	}

	.info {
		background-color: #32CBC7;
		box-shadow: 0px 3px 5px 0px rgba(50, 203, 199, 0.3);
	}

	.zu {
		background-color: #3C7CFF;
		box-shadow: 0px 3px 5px 0px rgba(60, 124, 255, 0.3);
	}

	.button {
		width: 70%;
		text-align: center;
		height: 68rpx;
		line-height: 68rpx;
		color: #fff;
		border-radius: 8rpx;
		font-size: 30rpx;
		font-weight: 500;
	}

	.pbutton {
		border: none;
	}
	.msg_box{
		background-color: white;
		text-align: center;
		box-sizing: border-box;
		padding: 30rpx 0;
		color: #787878;
		font-size: 34rpx;
	}
	.right {
		width: 12rpx;
	}
	.yy_box{
		box-sizing: border-box;
		padding: 40rpx 30rpx;
	}
	.yy_info{
		background-color: white;
		box-sizing: border-box;
		padding: 25rpx 40rpx;
		border-radius: 15rpx;
		margin-bottom: 20rpx;
		box-shadow: 0rpx 2rpx 1rpx #D0D0D0;
	}
</style>